<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="24">
					<el-form-item label="处置卡名称" prop="yjkmc" >
						<el-input v-model="dataForm.yjkmc" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="岗位名称" prop="glgwmc" >
						<el-input v-model="dataForm.glgwmc" placeholder="请输入岗位" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="处置卡编号" prop="czkbh" >
						<el-input v-model="dataForm.czkbh" placeholder="请输入编号" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="事故风险" prop="sgfx" >
						<el-input v-model="dataForm.sgfx" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="所属区域" prop="fscs" >
						<el-select filterable v-model="dataForm.fscs" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in fscsOptions" :key="index" :label="item.MC" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="工艺说明" prop="gysm" >
						<el-input v-model="dataForm.gysm" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="事故特征" prop="sgtz" >
						<el-input v-model="dataForm.sgtz" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="危害描述" prop="whms" >
						<el-input v-model="dataForm.whms" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="步骤说明" prop="bzsm" >
						<el-input v-model="dataForm.bzsm" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="处置措施" prop="czcs" >
						<el-input v-model="dataForm.czcs" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="主要责任人" prop="zyzrr" >
						<el-select filterable v-model="dataForm.zyzrr" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in zyzrrOptions" :key="index" :label="item.F_RealName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="注意事项" prop="zysx" >
						<el-input v-model="dataForm.zysx" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="内部应急电话" prop="nbyjdh" >
						<el-input v-model="dataForm.nbyjdh" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="外部应急电话" prop="wbyjdh" >
						<el-input v-model="dataForm.wbyjdh" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="附件" prop="fj" >
						<JNPF-UploadFz v-model="fjList" accept="" :fileSize="20" sizeUnit="MB" :limit="9" buttonText="点击上传" >
						</JNPF-UploadFz>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
      return {
        visible: false,
        isDetail: false,
        dataForm: {
					yjkmc:undefined,
					glgwmc:undefined,
					czkbh:undefined,
					sgfx:undefined,
					fscs:undefined,
					gysm:undefined,
					sgtz:undefined,
					whms:undefined,
					bzsm:undefined,
					czcs:undefined,
					zyzrr:undefined,
					zysx:undefined,
					nbyjdh:undefined,
					wbyjdh:undefined,
					fj:[],

        },
        rules: {

        },
				fscsOptions:[],
				zyzrrOptions:[],

					fjList:[],

      }
    },
    created() {
		this.getfscsOptions();
		this.getzyzrrOptions();

    },
    methods: {
		getfscsOptions()
		{
			previewDataInterface('e7b2c31f5a7147c08629c5409dd7fdf4').then(res => {
				this.fscsOptions = res.data
			})
		},
		getzyzrrOptions()
		{
			previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
				this.zyzrrOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/aqscYjczk/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.fjList = this.dataForm.fj ? JSON.parse(this.dataForm.fj) : [];

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.$set(this.dataForm, 'fj', JSON.stringify(this.fjList));

        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              request({
                url: '/api/System/aqscYjczk',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/aqscYjczk/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

    }
  }
  </script>